<template>
	<view class="seeList">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">影视</block>
		</cu-custom>
		<view class="dataList">
			<view class='searchBlock'>
				<view class='search'>
					<input type="text" placeholder="搜索电影/电视剧名称" style="width: 250px;" @input="codeValue" />
					<image class='searchImg' src='https://file.open.banchengyun.com/2019/04/01/155410697752500.png' @click="toSearch"></image>
				</view>
			</view>
			<view class="item" @click="playVideo(item.href)" v-for="(item,index) in dataList" :key="index">
				<!-- background-position: -80px 0; -->
				<view class="img" :style="'background: url(' + item.image + ');background-size: auto 100%;'"></view>
				<view class="con">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allRequest from '../../api/allRequest.js'
	export default {
		data() {
			return {
				dataList: [],
				keyword: '',
				requestName: '',
				page: 0,
				pageSize: 10,
				company: 0,
				type: 0
			}
		},

		onLoad(option) {
			let {
				company,
				type
			} = option
			this.company = company
			this.type = type
			this.getData()
		},
		mounted() {},
		onReachBottom(){
			this.getData()
		},
		methods: {
			playVideo(href) {
				uni.navigateTo({
					url: '/subFirst/chooseSource/chooseSource?url=' + href
				})
			},
			codeValue(e) {
				let {
					value
				} = e.detail
				this.keyword = value
				this.getData()
			},
			getData() {
				let {
					page,
					pageSize,
					company,
					type
				} = this.$data
				uni.showLoading({title:'加载中'})
				allRequest.recordList({
						pageNumber: ++page,
						pageSize,
						channel: Number(company)+1,
						type: Number(type)+1
					})
					.then(res => {
						if (res) {
							for(let i = 0;i < res.data.length;i++){
								this.dataList.push(res.data[i])
							}
							this.page = page
						}
						uni.hideLoading()
					})
			},
			toSearch(e){
				let {keyword,company,type} = this.$data
				uni.showLoading({title:'加载中'})
				let data = {
					title:keyword,
					channel:Number(company)+1,
					type:Number(type)+1
				}
				allRequest.recordSearch(data).then(res =>{
					if(res){
						this.dataList = []
						for(let i = 0;i < res.length;i++){
							this.dataList.push(res[i])
						}
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.dataList {
		width: 100%;
		height: 80vh;
		display: flex;
		flex-flow: wrap;
	}

	.dataList .item {
		width: 110px;
		height: 180px;
		margin: 2% 2% 0 2%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

	}

	.item .img {
		width: 110px;
		height: 150px;

	}

	.item .con {
		text-align: center;
	}

	.searchBlock {
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0 0 0;
	}

	.search {
		width: 89%;
		height: 40px;
		background: white;
		border-radius: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchImg {
		width: 13px;
		height: 14px;
		margin-right: 2.7%;
	}

	.content {
		font-size: 14px;
		color: rgba(153, 153, 153, 1);
	}
</style>
